<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>WS scrcpy</title>
    <style>
        #toolsBar{
            z-index: 10;
            position: absolute;
            left: 0px;
            right: 0px;
            width: 25px; 
            height: 25px;
            border-radius: 7px;
            background-color: #406d7d64;
        }
    </style>
        <script defer src="scrcpy/bundle.js"></script>
        <link href="scrcpy/main.css" rel="stylesheet">
</head>
<body>
    <div id="toolsBar"></div>
</body>
<script>
    const item = document.getElementById("toolsBar");
    let controlButton = null;
    let lisent = null;
    
    const callback = (mutationsList, observer)=>{
            for(let mutation of mutationsList) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                    if(controlButton.style.display == "none"){
                        item.style.display = "";
                        lisent.disconnect();
                        lisent = null;
                        return;
                    }
                }
            }
    }
    
    item.onclick = (env)=>{
        if(controlButton == null){
            controlButton = document.getElementById("control-button")
        }
        if (item.style.display == ""){
            item.style.display = "none"
            lisent = new MutationObserver(callback)
            lisent.observe(
                controlButton, 
                { attributes: true, attributeOldValue: true, attributeFilter: ['style'] }
            )
        }
    }

    /** 移动端触控操作 */
    item.ontouchmove = (e) => {
        let x = e.touches[0].clientX ;
        let y = e.touches[0].clientY;
        if(x > -10 && x < (window.innerWidth - 20)){
            item.style.left = x + "px";
        }
        if(y > -10 && y < (window.innerHeight - 20)){
            item.style.top = y + "px";
        }
    }

    /** 自动靠边 */
    item.ontouchend = (e)=>{
        if(parseInt(item.style.left) > (window.innerWidth / 2)){
            item.style.left = (window.innerWidth-20) + "px";
        }else{
            item.style.left = "-10px";
        }
    }
</script>
</html>
